<template>
  <div class="page ai-margin">
    <div class="page_top ai-margin-bottom ai-border-bottom">
      <div>
        <i class="el-icon-s-ticket" style="font-size: 24px"></i>
        <span class="ai-margin-left-sz title">{{name}}</span>
      </div>
    </div>
    <div class="page_bottom">
      <el-form :model="form" label-width="120px">
        <el-form-item label="设备型号" required>
          <el-input v-model="form.type" placeholder="请输入设备型号"></el-input>
        </el-form-item>
        <el-form-item label="设备配置" required>
          <el-input v-model="form.configure" placeholder="请输入设备配置"></el-input>
        </el-form-item>
        <el-form-item label="设备机身号" required>
          <el-input v-model="form.number" placeholder="请输入设备机身号"></el-input>
        </el-form-item>
        <el-form-item label="墨水溶剂型号" required>
          <el-input v-model="form.ink_type" placeholder="请输入墨水溶剂型号"></el-input>
        </el-form-item>
        <!--                <el-form-item label="安装日期"  required>-->
        <!--                    <el-date-picker v-model="form.installDate" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择安装日期时间"></el-date-picker>-->
        <!--                </el-form-item>-->
        <el-form-item label="公司名称" required>
          <el-input v-model="form.user_dep" placeholder="请输入客户公司"></el-input>
        </el-form-item>
        <el-form-item label="公司地址"  required>
          <el-input v-model="form.user_address" placeholder="请输入公司地址"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" required>
          <el-input v-model="form.user" placeholder="请输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" required>
          <el-input v-model="form.user_phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer ai-margin-top-lg ai-text-align-right" >
        <el-button @click="handleReturn">返回</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { parseTime } from "@/utils/index.js";
  import {getEquipmentById, updateEquipment} from "../../api/equipment"; // 在组件中引用date.js
  export default {
    name: "editEquipment",
    data(){
      return{
        form:{
          type:"",
          configure:"",
          number:"",
          ink_type:"",
          installDate:"",
          engineer:"",
          user_dep:"",
          user_address:"",
          user:"",
          user_phone:"",
        },
        formData:{
          type:"",
          configure:"",
          number:"",
          ink_type:"",
          installDate:"",
          engineer:"",
          user_dep:"",
          user_address:"",
          user:"",
          user_phone:"",
        },
        dialogVisible: true,
        editorID:"",
        name:"",
      }
    },
    mounted() {
      this.editorID = this.$router.history.current.query.id;
      this.formData = this.$router.history.current.query.data;
      this.name = this.formData.type
      this.handleContent();
      console.log(this.formData)
      // console.log(this.formData)
    },
    methods:{
      handleContent(){
        let _this = this;
        getEquipmentById(this.editorID)
          .then(rsp =>{
            console.log(rsp)
            let data = rsp.result[0]
            _this.form = data;
          })
          .catch(respond =>{
            console.log(respond)

          })
      },
      formatDate(time) {
        let date = new Date(time);
        return parseTime(date, "{y}-{m}-{d} {h}:{i}:{s}");
      },
      handleSave(){
        // this.form.installDate = this.formatDate(this.form.installDate)
        console.log(this.formData)
        console.log(this.form)
        let data =''
        if (this.formData.type !== this.form.type){
          data = data +'type='+this.form.type+'&';
        }
        if (this.formData.configure !== this.form.configure) {
          data = data +'configure='+this.form.configure +'&';
        }
        if (this.formData.number !== this.form.number){
          data = data +'number='+this.form.number+'&';
        }
        // if (this.formData.installDate !== this.form.installDate){
        //   data = data +'installDate='+this.form.installDate+'&';
        // } ;
        if (this.formData.ink_type !== this.form.ink_type){
          data = data + 'ink_type='+this.form.ink_type+'&';
        }
        if (this.formData.user_dep !== this.form.user_dep){
          data = data + 'user_dep='+this.form.user_dep+'&';
        }
        if (this.formData.user_address !== this.form.user_address){
          data = data + 'user_address='+this.form.user_address+'&';
        }
        if (this.formData.user !== this.form.user){
          data = data + 'user='+this.form.user+'&';
        }
        if (this.formData.user_phone !== this.form.user_phone){
          data = data + 'user_phone='+this.form.user_phone+'&';
        }
        console.log(data)
        data=data.substring(0,data.length-1)
        updateEquipment(this.editorID,data)
          .then(rsp =>{
            console.log(rsp)
            this.$message.success(rsp.msg);
            this.handleContent();
            this.$router.push('/equipment')
          })
          .catch(reason => {
            console.log(reason)

          })
      },
      handleReturn(){
        this.$router.push('/equipment')
      }
    }
  };
</script>

<style scoped lang="scss">
  .page{
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    .page_top{
      .title{
        line-height: 50px;
      }
    }
    .page_bottom{
      width: 70%;
      margin: 20px auto;
    }
  }
</style>
